<template>
  <div>
    <div class="wrap">
      <bread-crumb></bread-crumb>
      <h1>不带头像的学生的信息展示</h1>
      <el-table
        id="work-table"
        :data="tableData"
        style="width: 100%"
        border
        height="500px"
      >
        <el-table-column prop="stu_id" label="学号" width="100">
        </el-table-column>
        <el-table-column prop="stu_name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="stu_sex" label="性别" width="100">
        </el-table-column>
        <el-table-column prop="stu_date" label="出生日期" width="180">
          <template slot-scope="scope">
            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="exportExcel">将数据导出到本地的Excel当中</el-button>
    </div>
  </div>
</template>

<script>
import { req_stu_info_nohead } from "@/api/stuInfo.js";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  async mounted() {
    let result = await req_stu_info_nohead();
    console.log(result);
    this.tableData = result.data;
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    exportExcel() {
      console.log("导出到Excel当中");
      let wb = XLSX.utils.table_to_book(document.getElementById("work-table"), {
        raw: true,
      });
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "stuInfo.xlsx"
        );
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  .wrap {
    height: 30px;
  }
}
</style>